<template>
    <div class="flex">
        <div class="stat-type">
            <div class="title-row">
                <div class="flex item-center">
                    <div class="label-line"></div>
                    <span class="title">办件类型</span>

                </div>
                <div class="line"></div>
            </div>
            <div id="statCharts" class="take-content">

            </div>
        </div>
        <div class="stat-rank">
            <div class="title-row">
                <div class="flex item-center rank-title">
                    <div class="label-line"></div>
                    <span class="title">办件排名</span>

                </div>
                <div class="line"></div>
            </div>
            <ul class="rank-ul">
                <li v-for="(item,index) in rankList" :key="index" class="rank-list">
                    <div class="flex item-center">

                        <img v-if="index<=2" :src="getRankIcon(index)" alt="">
                        <div v-else class="default-rank">{{index+1}}</div>
                        <span class="m-l-15">{{item.name}}</span>
                    </div>
                    <div class="flex item-center">
                        <span class="m-r-15">{{item.amount}}</span>
                        <img :src="getRankStateIcon(item)" alt="">
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import echarts from "echarts";
const no1 = require("../../assets/acceptWorkbench/no1.png");
const no2 = require("../../assets/acceptWorkbench/no2.png");
const no3 = require("../../assets/acceptWorkbench/no3.png");
const up = require("../../assets/acceptWorkbench/up.png");
const hold = require("../../assets/acceptWorkbench/keep.png");
const down = require("../../assets/acceptWorkbench/down.png");
import { findByDictCode, getHandleType, handleRank } from "../../config/api.js";
import Pubsub from "../../utils/pubsub";
export default {
    data() {
        return {
            iconList: [no1, no2, no3],
            rankStateList: { up, hold, down },
            rankList: [],
            handleTypeList: [], //办件类型统计
            handleTypeCode: [], //办件类型-数据字典
            handleTypeCodeTitle: [], //办件类型-数据字典-title
            myChart: null
        };
    },
    mounted() {
        this.initChart();
        this.initData();
    },
    methods: {
        initChart() {
            this.myChart = echarts.init(document.getElementById("statCharts"));
            let option = {
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                color: ["#37a2da", "#67e0e3", "#ffdb5c"],
                legend: {
                    orient: "vertical",
                    x: "left",
                    data: this.handleTypeCodeTitle || []
                },
                grid: {
                    bottom: 0
                },
                series: [
                    {
                        name: "办件类型",
                        type: "pie",
                        radius: ["50%", "70%"],
                        avoidLabelOverlap: false,
                        center: ["50%", "60%"],
                        label: {
                            normal: {
                                show: false,
                                position: "center"
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: "30",
                                    fontWeight: "bold"
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: []
                    }
                ]
            };
            this.myChart.setOption(option);
            // setTimeout(() => {
            //     this.myChart.hideLoading();
            //     this.myChart.setOption({
            //         //加载数据图表
            //         series: [
            //             {
            //                 data: this.initData()
            //             }
            //         ]
            //     });
            // }, 3000);
            // window.addEventListener("resize", function() {
            //     this.myChart.resize();
            // });
        },
        /**
         * 获取rank icon
         */
        getRankIcon(index) {
            return this.iconList[index];
        },
        /**
         * 获取rank状态 icon
         */
        getRankStateIcon(item) {
            return this.rankStateList[item.status];
        },
        /**
         * 办件类型统计
         */
        getHandleTypeList(handleTypeCodeTitle = []) {
            getHandleType({}).then((res = {}) => {
                // this.handleTypeList = res.data || [];
                let handleTypeList = res.data || [];
                handleTypeList.map(item => {
                    item.value = item.count;
                    item.name =
                        (
                            handleTypeCodeTitle.find(
                                i => i.dictDataCode == item.handleType
                            ) || {}
                        ).dictDataName || "-";
                });
                let titleArr = [];
                handleTypeCodeTitle.map((item)=>{
                    titleArr.push(item.dictDataName)
                })
                this.myChart.setOption({
                    // 加载数据图表
                    legend: {
                        orient: "vertical",
                        x: "left",
                        data: titleArr || []
                    },
                    series: [
                        {
                            data: handleTypeList
                        }
                    ]
                });
                // this.myChart.setOption({
                //     //加载数据图表
                //     series: [
                //         {
                //             data: handleTypeList
                //         }
                //     ]
                // });
            });
        },
        /**
         * 办件类型排行榜
         */
        getHandleRank() {
            handleRank({ limit: 6 }).then((res = {}) => {
                this.rankList = res.data || [];
            });
        },
        /**
         * 获取数据字典--办理类型
         */
        getDictCode() {
            findByDictCode({ dictCode: "handleType" }).then((res = {}) => {
                if (res.data && res.data.length) {
                    this.handleTypeCode = res.data || [];
                    let handleTypeCodeTitle = [];
                    res.data.map(item => {
                        handleTypeCodeTitle.push(item.dictDataName);
                    });
                    this.handleTypeCodeTitle = handleTypeCodeTitle;
                    this.getHandleTypeList(res.data);
                }
            });
        },
        /**
         * 处理类型数据
         */
        initData() {
            const { handleTypeList = [], handleTypeCode } = this;
            handleTypeList.map(item => {
                item.value = item.count;
                item.name =
                    (
                        handleTypeCode.find(
                            i => i.dictDataCode == item.handleType
                        ) || {}
                    ).dictDataName || "-";
            });
            this.handleTypeList = handleTypeList;
            console.log(handleTypeList, "list");
            this.myChart.setOption({
                //加载数据图表
                series: [
                    {
                        data: handleTypeList
                    }
                ]
            });
            // return handleTypeList;
        }
    },
    created() {
        this.getDictCode();
        // this.getHandleTypeList();
        this.getHandleRank();
        this.pubsub_token1 = Pubsub.subscribe("BUSINESS_HANDLE_TYPE",()=>{
            this.getDictCode();
        })
        this.pubsub_token2 = Pubsub.subscribe("BUSINESS_HANDLE_RANK",()=>{
            this.getHandleRank();
        })
    },
    destroyed(){
        this.pubsub_token1 && Pubsub.unsubscribe(this.pubsub_token1);
        this.pubsub_token2 && Pubsub.unsubscribe(this.pubsub_token2);
    }
};
</script>

<style lang = "scss" scoped>
@import "../../css/unifyAcceptWorkbench.scss";

.take-content {
    margin-top: 20px;
    height: 259px;
    /* width: 259px; */
    overflow: auto;
    .take-li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 14px;
        &:last-child {
            margin-bottom: 0;
        }
        font-size: 16px;
    }
    .circle {
        height: 4px;
        width: 4px;
        border-radius: 4px;
        background: #000;
        display: block;
        margin-right: 20px;
    }
    .take-num {
        color: #ffaa00;
    }
    .take-time {
        font-size: 18px;
        color: #ffaa00;
        span {
            font-size: 14px;
            color: #888888;
        }
    }
}
.rank-list {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eeeeee;
    align-items: center;
    padding: 10px 0;
}
.default-rank {
    height: 24px;
    width: 18px;
    text-align: center;
    line-height: 24px;
}

.stat-type {
    flex: 2;
    margin-right: 30px;
}
.stat-rank {
    flex: 1;
}
.rank-title {
    white-space: nowrap;
}
</style>